{% extends "partials/layout.html" %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/css/product.css"/>
{% endblock %}

{% block content %}
<div class="pro">
  <img class="banner" src="/static/img/pro_banner.jpg" />
  <div class="container ">
    <div class="tabs">
      <a href="/pro_shiji.html" class="tab">科研试剂</a>
      <a href="/pro_haocai.html" class="tab">实验耗材</a>
      <a href="javascript:void(0);" class="tab on">小型仪器</a>
    </div>
    <div class="box">
      <ul class="left">
        <li>通用耗材</li>
        <li>PCR相关耗材</li>
        <li>细胞培养相关耗材</li>
        <li>Western Blot实验耗材</li>
        <li>样本采集套装</li>
      </ul>
      <div class="center">
        <!-- <div class="search">
          <input type="text" placeholder="请输入您要搜索的内容" />
          <a href="javascript:void(0)" class="button">搜索</a>
        </div> -->
        
        
        <div class="list">
          {% for item in [1,2,3,4,5,6,7,8,9,10] %}
          <a href="./pro_detail.html?id={{item}}&type=yiqi">
            {% if (loop.index % 5) == 0 %}
            <div class="item" style="margin-right:0;">
            {% else %}
            <div class="item">
            {% endif %}
              <img src="/static/img/f1_1.png" />
              <p class="name">国产非灭菌吸头国产非灭菌吸头</p>
            </div>
          </a>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  (function(){
    // init();
    function init(){
      let $left = $('.left');
      let leftNav = [];
      for(var i = 0; i < data.length; i++){
          leftNav.push((i === 0 ? '<li class="on">' : '<li>')+ data[i].method +'</li>')
      }
      $left.html(leftNav.join(''));
      initCenter(0);
    }

    function initCenter(navIndex){
      var tplItem = $('#tmpPro1').find('ul').html();
      var tplGroup = $('#tmpPro1').html();
      var groups = [];
      for(var i = 0; i < data[navIndex].groups.length; i++){
        var itemList = data[navIndex].groups[i].list;
        var items = [];
        for(var j = 0; j < itemList.length; j++){
          items.push(utility.tmplFormat(tplItem, itemList[j]));
        }
        var $group = $("<div>"+ utility.tmplFormat(tplGroup, data[navIndex].groups[i]) + '</div>');
        $group.find('ul').html(items.join(''));
        groups.push($group.html())
      }
      $('.center .list').html(groups.join(''));
    }

    $('.left li').click(function(){
      var $sender = $(this);
      if($sender.hasClass('on')) return;

      $sender.siblings().removeClass('on');
      $sender.addClass('on');
      initCenter($sender.index());
    });

    $('.center').on('click', 'li > p', function(){
      var $sender = $(this);
      var $detail = $sender.siblings();
      var isOpen = false;
      if(!$sender.hasClass('open')){
        $sender.addClass('open');
        $sender.find('span').text('MORE -');
        isOpen = true;
      }
      $detail.slideToggle(500, function(){
        if(!isOpen){
          $sender.removeClass('open');
          $sender.find('span').text('MORE +');
        }
      });
    })
  })();
</script>
{% endblock %}
